import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "@redux-devtools/extension";

// 引入 redux-logger 日志输出
import logger from "redux-logger";
// 引入 redux-thunk  实现 异步动作（async actions）action 是一个函数
//    让 dispatch 可以接受函数
//    ？dispatch 还可以接受普通对象嘛？当然可以
//    原理：内部做了 action 的判断
//          1. 判断 action 是函数的话，让 store 主动帮我们执行一下这个 函数，并传递了两个参数
//              1. dispatch
//              2. getState
//          2. 判断 action 是普通对象的话，直接走原始的 dispatch 操作
import thunk from "redux-thunk";

const initialState = {
  count: 0,
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case "increment":
      return {
        count: state.count + 1,
      };

    case "decrement":
      return {
        count: state.count - 1,
      };

    default:
      return state;
  }
}

// 创建 store , 用了 redux-devtools
// const store = createStore(reducer, composeWithDevTools());
// 创建 store ， 用了 中间件
// const store = createStore(reducer, applyMiddleware(logger));
// 创建 store , 中间件与 redux-devtools 结合起来使用 推荐推荐
const store = createStore(
  reducer,
  composeWithDevTools(applyMiddleware(thunk, logger))
);

/**
 * 中间件的原理
 *    对 dispatch 做了一个封装
 *    演示一个 logger 的中间件
 */

// // 1. 将 store.dispatch 先给存起来
// const next = store.dispatch;
// // 2. 再对 store.dispatch 做修改
// store.dispatch = (action) => {
//   // 输出日志
//   console.log("begin", store.getState());
//   // 触发真实的 dispatch
//   next(action);
//   // 输出日志
//   console.log("end", store.getState());
// };

export default store;
